<template>
  <div class="app-container customer-div">
<!--    <div style="font-size:14px;color:#606266;position: relative;z-index: 1">SAP更新日期：{{JDupdate}}</div>-->
    <el-menu :default-active="listQuery.tab" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="wait">销售合同 - 待处理</el-menu-item>
      <el-menu-item index="hasProcess">销售合同 - 已处理</el-menu-item>
      <el-menu-item index="myChargeDelaySettleOrder">销售合同 - 我负责的后结算</el-menu-item>
      <el-menu-item index="allDelaySettleOrder" v-if="allDelaySettleOrder">销售合同 - 全部后结算</el-menu-item>
      <el-menu-item index="txPending" v-if="isCanseeTx" >桐鑫合同 - 待处理 ({{ txPending }})</el-menu-item>
      <el-menu-item index="txProcessed" v-if="isCanseeTx" >桐鑫合同 - 已处理</el-menu-item>
      <el-menu-item index="rcPending" v-if="isCanseeRc" >日程合同 - 待处理 ({{ rcPending }})</el-menu-item>
      <el-menu-item index="rcProcessed" v-if="isCanseeRc" >日程合同 - 已处理</el-menu-item>
    </el-menu>

    <div style="margin-top: 40px">
      <!--搜索-->
      <el-form :inline="true" :model="listQuery" size="mini" label-width="120px">
        <el-form-item label="订单编号：">
          <el-input v-model="listQuery.orderSn"></el-input>
        </el-form-item>
        <el-form-item label="订单日期：">
          <el-date-picker
                  :default-time="['00:00:00', '23:59:59']"
                  v-model="listQuery.createTime"
                  type="daterange"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="合同流转状态：" v-if="listQuery.tab != 'wait' && listQuery.tab != 'txPending'">
          <el-select v-model="listQuery.orderState" class="input-width" style="width:195px" placeholder="请选择" clearable>
            <el-option :value="item.orderState" :label="item.text" :key="item.orderState" v-for="item in orderStateList"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客户编号：">
          <el-input v-model="listQuery.customerNumber"></el-input>
<!--          <el-autocomplete-->
<!--                  clearable-->
<!--                  class="inline-input"-->
<!--                  value-key="customerName"-->
<!--                  :fetch-suggestions="querySearch"-->
<!--                  v-model="listQuery.keywords"-->
<!--                  placeholder="请输入内容"-->
<!--                  @select="handleSelectCustomerName"-->
<!--                  :trigger-on-focus="false"-->
<!--                  style="width: 260px;"-->
<!--          ></el-autocomplete>-->
        </el-form-item>
        <el-form-item label="客户名称：">
            <el-autocomplete
                    clearable
                    class="inline-input"
                    value-key="customerName"
                    :fetch-suggestions="querySearch"
                    v-model="listQuery.customerName"
                    placeholder="请输入内容"
                    @select="handleSelectCustomerName"
                    :trigger-on-focus="false"
                    style="width: 260px;"
            ></el-autocomplete>
        </el-form-item>
        <el-form-item label="业务员：" >
          <el-select v-model="listQuery.userId" filterable placeholder="请选择" clearable>
            <el-option
                    v-for="item in userOptionList"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否变更：">
          <el-select v-model="listQuery.isRestart" filterable placeholder="请选择" clearable style="width:100px">
            <el-option :key="1" label="是" :value="1"></el-option>
            <el-option :key="0" label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付状态：">
          <el-select v-model="listQuery.payState" filterable placeholder="请选择" clearable>
            <el-option :key="2" label="已结清" :value="2"></el-option>
            <el-option :key="1" label="未结清" :value="1"></el-option>
            <el-option :key="0" label="未支付" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付日期：">
          <el-date-picker
                  :default-time="['00:00:00', '23:59:59']"
                  v-model="listQuery.payDate"
                  type="daterange"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="财务状态：">
          <el-select v-model="listQuery.financeState" filterable placeholder="请选择" clearable style="width:100px" multiple>
            <el-option key="0" label="未审核" value="0"></el-option>
            <el-option key="1" label="已审核" value="1"></el-option>
            <el-option key="2" label="已关闭" value="2"></el-option>
            <el-option key="3" label="部分审核" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否回退：">
          <el-select v-model="listQuery.isProcessBack" filterable placeholder="请选择" clearable style="width:100px">
            <el-option :key="1" label="是" :value="1"></el-option>
            <el-option :key="0" label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付方式：">
          <el-select v-model="listQuery.transactionType" filterable placeholder="请选择" clearable>
            <el-option key="BANK_PAY" label="银行汇款" value="BANK_PAY"></el-option>
            <el-option key="COD_PAY" label="货到付款" value="COD_PAY"></el-option>
            <el-option key="DEPOSIT_PAY" label="定金" value="DEPOSIT_PAY"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同类型：">
          <el-select v-model="listQuery.orderType" clearable placeholder="请选择">
            <el-option value="normal" label="正常" key="normal"></el-option>
            <el-option value="un_sure" label="待定" key="un_sure"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="明确合同约定时间：" >
          <el-select v-model="listQuery.isTimeSure" placeholder="请选择" clearable>
            <el-option key="1" label="是" value="1"></el-option>
            <el-option key="2" label="否" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单类型：" >
          <el-select v-model="listQuery.isMoresuOnlineOrder" class="input-width" style="width:150px" placeholder="请选择" clearable>
            <el-option :key="0" label="销售订单" :value="0"></el-option>
            <el-option :key="1" label="推广订单" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="推广订单是否需要审核：" label-width="150px" v-if="listQuery.isMoresuOnlineOrder == 1">
          <el-select v-model="listQuery.isMoresuNeedCheck" class="input-width" style="width:100px" placeholder="请选择" clearable >
            <el-option :key="1" label="是" :value="1"></el-option>
            <el-option :key="0" label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否为维护合同：" label-width="150px">
          <el-select v-model="listQuery.isDefendOrder" class="input-width" style="width:100px" placeholder="请选择" clearable >
            <el-option :key="1" label="是" :value="1"></el-option>
            <el-option :key="0" label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动类型：" label-width="150px">
          <el-select v-model="listQuery.activityType" class="input-width" style="width:100px" placeholder="请选择" clearable >
            <el-option label="拍卖" value="paiMai"></el-option>
            <el-option label="秒杀" value="seckill"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否有推荐人：" >
          <el-select v-model="listQuery.isHasIntroducer" class="input-width" style="width:195px" placeholder="请选择" clearable >
            <el-option :key="1" label="是" :value="1"></el-option>
            <el-option :key="0" label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="财务审核时间：">
          <el-date-picker
            :default-time="['00:00:00', '23:59:59']"
            v-model="listQuery.financeConfirmDate"
            type="daterange"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="取消时间：">
          <el-date-picker
            :default-time="['00:00:00', '23:59:59']"
            v-model="listQuery.financeCancelDate"
            type="daterange"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="取消时间(财务已审核订单)：" label-width="200px">
          <el-date-picker
            :default-time="['00:00:00', '23:59:59']"
            v-model="listQuery.checkedCancelDate"
            type="daterange"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="锡商还款状态：">
          <el-select v-model="listQuery.repaidStatus" filterable placeholder="请选择" clearable style="width:100px">
            <el-option :key="2" label="已还清" :value="2"></el-option>
            <el-option :key="1" label="未还清" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否后结算订单：">
          <el-select v-model="listQuery.isDelaySettleOrder" placeholder="请选择" clearable style="width:100px;">
            <el-option :key="1" label="是" :value="1"></el-option>
            <el-option :key="0" label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="后结算状态：">
          <el-select v-model="listQuery.delaySettleState" multiple placeholder="请选择" clearable style="width:150px;">
            <el-option label="未申请结算" :value="0"></el-option>
            <el-option label="部分申请结算" :value="10"></el-option>
            <el-option label="全部申请结算" :value="20"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="handleSearchList()"
            type="primary">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>

      <!--数据列表-->
    <div style="font-size:14px;line-height: 30px;padding:10px 0 ">
      合同总数：<span style="font-weight: bold">{{statisticsCount }}</span>
      <span style="padding-left:20px;">合同金额：</span><span style="font-weight: bold">{{statisticsAmount }}</span>
      <span style="padding-left:20px;">商品数量：</span><span style="font-weight: bold">{{statisticsGoodsNum }}</span>
    </div>
      <div class="table-container">
        <el-table
          v-loading="listLoading"
          :data="tableData"
          border
          style="width: 100%; margin-top: 20px">
          <el-table-column
                  label="订单日期"
                  width="150"
                  align="center">
            <template slot-scope="scope">
              {{scope.row.createTime}}
            </template>
          </el-table-column>
          <el-table-column  label="订单号" width="200">
            <template slot-scope="scope">
              <div>
                <span style="font-size:12px;vertical-align: middle">{{scope.row.orderSn}}</span>
                <img src="../../assets/images/moresu.png" style="vertical-align: middle;" v-if="scope.row.moresuSn != ''"/>
                <img src="../../assets/images/zhuofei2.png" v-if="scope.row.orderState == 10" style="vertical-align: middle;"/>
                <img src="../../assets/images/bian.png" v-if="scope.row.isRestart" style="vertical-align: middle;"/>
                <img src="../../assets/images/yue.png" v-if="scope.row.isTimeSure == 1" style="vertical-align: middle;"/>
                <img src="../../assets/images/xianshang.png" v-if="scope.row.isMoresuOnlineOrder == 1"  style="vertical-align: middle;"/>
                <img src="https://pic.moresu.com/FgZkvAbP27TK55QAyRIOU3t0mmoC" v-if="scope.row.isHasCostOrder == 1"  style="vertical-align: middle;"/>
                <img src="https://pic.moresu.com/FhIaQcrC8Mbtqn9EmG4uteNBibd7" v-if="scope.row.activityType == 'paiMai'"  style="vertical-align: middle;width:16px;"/>
                <img src="https://pic.moresu.com/Frk-59w7qGLTVZm7uWljVJtYo3iI" v-if="scope.row.activityType == 'seckill'"  style="vertical-align: middle;width:16px;"/>
                <img src="https://pic.moresu.com/Fm17IfpE4F4iv84Pagh8x1RmVdDw" v-if="scope.row.isPreorder == 1" style="vertical-align: middle;"/>
                <span v-if="scope.row.isZ == 1" style="display: inline-block;width:22px;line-height: 18px;background: #409EFF;color:#fff;font-size:12px;border-radius: 4px;text-align: center">对</span>
                <span v-if="scope.row.isDelaySettleOrder == 1" style="vertical-align:middle;display: inline-block;width:auto;padding:0 3px;line-height: 18px;background: green;color:#fff;font-size:10px;border-radius: 4px;text-align: center">后结算</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
                  label-class-name="bgth"
                  label="推广订单是否需要审核"
                  width="100"
                  align="center">
            <template slot-scope="scope">
              {{scope.row.isMoresuOnlineOrder == 1 ? (scope.row.isMoresuNeedCheck == 1 ? '是' : '否' ): '--'}}
            </template>
          </el-table-column>
          <el-table-column
                  label="支付状态"
                  width="100"
                  align="center">
            <template slot-scope="scope">
              {{scope.row.payState | fiferPayState}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="财务状态"
            width="80">
            <template slot-scope="scope">
              {{scope.row.financeState}}
            </template>
          </el-table-column>

          <el-table-column
                  label="维护合同"
                  width="100"
                  align="center">
            <template slot-scope="scope">
              {{scope.row.isDefendOrder == 1 ? '是' : '否' }}
            </template>
          </el-table-column>
          <el-table-column
                  label="支付日期"
                  width="130"
                  align="center">
            <template slot-scope="scope">
              {{scope.row.payTime}}
            </template>
          </el-table-column>
          <el-table-column
            label="客户编号"
            width="300">
            <template slot-scope="scope">
              <div>{{scope.row.customerNumber}}</div>
              <!--是否有权限-->
              <div v-if="scope.row.isShowCustomerName">{{scope.row.customerName}}</div>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            label="客户标签"
            width="150">
            <template slot-scope="scope">
              <el-tooltip placement="bottom" effect="light">
                <div slot="content" style="max-width: 400px"> <crm-tag :item="item" v-for="item in scope.row.customerTag" :key="item.tagName" style="margin-bottom:4px;margin-right:4px"></crm-tag></div>
                <div style="padding:0 10px;width:100%; white-space: nowrap;  overflow: hidden; text-overflow: ellipsis;">
                  <crm-tag :item="item" v-for="item in scope.row.customerTag" :key="item.tagName" style="margin-bottom:4px;margin-right:4px"></crm-tag>
                </div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
                  align="center"
                  label="采购评级"
                  width="100">
            <template slot-scope="scope">
              {{scope.row.customerLabel}}
            </template>
          </el-table-column>
          <el-table-column
                  width="300"
                  label="商品信息">
            <template slot-scope="scope">
              <div :style="{'border-bottom':index==scope.row.goodsName.length -1 ? '0 solid #eee' : '1px solid #eee'}" v-for="(item,index) in scope.row.goodsName">{{item}}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="userName"
            label="业务员"
            width="120"
            align="center">
          </el-table-column>
          <el-table-column
            prop="orderGoodsNumber"
            label="合同数量"
            width="100"
            align="center">
          </el-table-column>
          <el-table-column
            label="摩叔运费"
            width="100"
            align="center">
            <template slot-scope="scope">
              {{scope.row.freight}}
            </template>
          </el-table-column>
          <el-table-column
            label="合同金额"
            width="100"
            align="center">
            <template slot-scope="scope">
              {{scope.row.orderAmount}}
            </template>
          </el-table-column>
          <el-table-column
                  label="预估利润"
                  width="100"
                  align="center">
            <template slot-scope="scope">
              {{scope.row.orderState != 0 && scope.row.orderState != 20 ? scope.row.saleProfit : '--'}}
            </template>
          </el-table-column>
          <el-table-column
                  label="贷款金额"
                  width="100"
                  align="center">
            <template slot-scope="scope">
                {{scope.row.loanAmount }}
            </template>
          </el-table-column>
          <el-table-column
                  label="还款到期时间"
                  width="130"
                  align="center">
            <template slot-scope="scope">
                {{scope.row.repaymentDueDate }}
            </template>
          </el-table-column>
          <el-table-column
                  label="已还款金额"
                  width="100"
                  align="center">
            <template slot-scope="scope">
                {{scope.row.repaidAmount }}
            </template>
          </el-table-column>
          <el-table-column
                  label="未还款金额"
                  width="100"
                  align="center">
            <template slot-scope="scope">
                {{scope.row.noRepaidAmount }}
            </template>
          </el-table-column>
          <el-table-column
                  label="还款状态"
                  width="100"
                  align="center">
            <template slot-scope="scope">
                {{scope.row.repaidStatus | filterRepaid}}
            </template>
          </el-table-column>
          <el-table-column
                  label="还款完成时间"
                  width="130"
                  align="center">
            <template slot-scope="scope">
                {{scope.row.repaymentFinishDate?scope.row.repaymentFinishDate:"--"}}
            </template>
          </el-table-column>

          <el-table-column
                  label="回退总次数"
                  width="100"
                  align="center">
            <template slot-scope="scope">
              {{scope.row.processBackNum}}
            </template>
          </el-table-column>
          <el-table-column
                  label="采购回退"
                  width="100"
                  align="center">
            <template slot-scope="scope">
              {{scope.row.purchaseBackNum}}
            </template>
          </el-table-column>
          <el-table-column
                  label="销售回退"
                  width="100"
                  align="center">
            <template slot-scope="scope">
              {{scope.row.saleBackNum}}
            </template>
          </el-table-column>
          <el-table-column
                  label="支付方式"
                  width="100"
                  align="center">
            <template slot-scope="scope">
              {{scope.row.transactionType | fiftransactionType}}
            </template>
          </el-table-column>
          <el-table-column
                  label="合同类型"
                  width="100"
                  align="center">
            <template slot-scope="scope">
              {{scope.row.orderType == 'normal' ? '正常' : '待定'}}
            </template>
          </el-table-column>
          <el-table-column
                  label="操作人"
                  width="120"
                  align="center">
            <template slot-scope="scope">
                {{scope.row.purchaseName}}
            </template>
          </el-table-column>
          <el-table-column
            label="介绍类型"
            width="100"
            align="center">
            <template slot-scope="scope">
              {{scope.row.introduceType  }}
            </template>
          </el-table-column>
          <el-table-column
            label="介绍人"
            width="100"
            align="center">
            <template slot-scope="scope">
              {{scope.row.introduceName }}
            </template>
          </el-table-column>
          <el-table-column
            label="财务审核时间"
            width="150"
            align="center">
            <template slot-scope="scope">
              {{scope.row.financeConfirmTime }}
            </template>
          </el-table-column>
          <el-table-column
                  fixed="right"
                label="合同流转状态"
                width="120"
                align="center">
          <template slot-scope="scope">
            {{scope.row.orderStateStr}}
          </template>
        </el-table-column>
          <el-table-column
            label="取消时间"
            width="130"
            align="center">
            <template slot-scope="scope">
              {{scope.row.financeCancelTime}}
            </template>
          </el-table-column>
          <el-table-column
                  width="120"
            fixed="right"
            label="操作"
            align="center">
            <template slot-scope="scope">
                <el-button
                        v-if="scope.row.orderState == 20"
                        type="text"
                        size="mini"
                        @click="toDetail('edit',scope.row)">审核
                </el-button>
                <el-button
                        v-if="(scope.row.orderState == 25 ||scope.row.orderState == 24) && isMange == 1"
                        type="text"
                        size="mini"
                        @click="toDetail('edit',scope.row)">审核
                </el-button>
                <el-button
                        v-if="(scope.row.orderState == 25 ||scope.row.orderState == 24) && isMange == 0"
                        type="text"
                        size="mini"
                        @click="toDetail('see',scope.row)">查看
                </el-button>
                <el-button
                        v-else
                        type="text"
                        size="mini"
                        @click="toDetail('see',scope.row)">查看
                </el-button>
              <el-button
                      type="text"
                      size="mini"
                      @click="showSetLabel(scope.row)">采购评级
              </el-button>
              <el-button
                v-if="scope.row.isCanApplySettle"
                type="text"
                size="mini"
                @click="toSettlement(scope.row)">发起结算
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[10,15,20]"
        :total="count">
      </el-pagination>
    </div>

    <!--设置采购评级-->
    <el-dialog
            :before-close="handleClose5"
            :close-on-click-modal="false"
            title="设置采购评级"
            :visible.sync="dialogVisible5"
            width="420px">
      <el-form :model="labelForm" size="mini" label-width="120px" ref="labelForm">
        <el-form-item label="采购评级：">
          <el-select v-model="labelForm.customerLabel" filterable placeholder="请选择">
            <el-option
                    key="A类"
                    label="A类   长期合作，信誉良好，同等价格优先选择我们，每月稳定拿货，毛利100元/吨以上。"
                    value="A类">
            </el-option>
            <el-option
                    key="B类"
                    label="B类   根据经营情况拿货，实体工厂，通过努力可以发展成A类客户。"
                    value="B类">
            </el-option>
            <el-option
                    key="C类"
                    label="C类   看重价格，采购量波动大。"
                    value="C类">
            </el-option>
            <el-option
                    key="D类"
                    label="D类  缺乏感恩之心，有过违约行为（3个月后再进行评定）。"
                    value="D类">
            </el-option>
            <el-option
                    key="E类"
                    label="E类   新客户（根据其与以前供应商合作情况对比，可以确定的放入对应等级，直接放入对应等级，暂时无法评定的放入E级）。"
                    value="E类">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose5">取 消</el-button>
          <el-button type="primary" @click="handleConfirm5" :loading="btnLoading5">确 定</el-button>
      </span>
    </el-dialog>


    <!--后结算申请-->
    <postSettlement ref="postSettlement" @update="getList"></postSettlement>

  </div>
</template>
<script>
  import {getCustomerOption,getUserOption,myDeptList,saleOrderList,getOrderStatList,getOrderUsersList,getKingInfo,customersAjaxEdit,txOrderList,rcOrderList,getTxOrdersCount,getRcOrdersCount} from '@/api/partner'
  import {formatDate} from '@/utils/date';
  import store from '@/store'
  import { mapGetters } from 'vuex'
  import crmTag from "@/views/components/crmTag";
  import postSettlement from "@/views/sale/components/postSettlement";
  const defaultListQuery={
    pageNum: 1,
    pageSize: 10,
    keywords: '',
    createTime:'',
    orderState:null,
    tab:'wait',
    orderSn:'',
    userId:null,
    type:'purchase',
    isRestart:null,
    payState:null,
    payDate:null,
    financeState:[],
    isProcessBack:null,
    transactionType:null,
    orderType:null,
    isTimeSure:null,
    isMoresuOnlineOrder:null,
    isMoresuNeedCheck:null,
    activityType:'',
    repaidStatus:'',
    isHasIntroducer:'',
    financeConfirmDate:[],
    financeCancelDate:[],
    checkedCancelDate:[],
    customerNumber:'',
    customerName:'',
    isDelaySettleOrder:'',
    delaySettleState:[]
  };
  export default {
    name: "index",
    data(){
      return {
        listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
        tableData: [],
        count: 0,
        listLoading: false,
        customerStateList: [],
        userOptionList:[],
        roles:store.getters.roles ? store.getters.roles : [],
        orderStateList:[],
        JDupdate:'',
        listAmount:0,
        statisticsCount:0,
        statisticsAmount:0,
        statisticsGoodsNum:0,
        txPending:0,
        rcPending:0,
        dialogVisible5:false,
        labelForm:{
          customerLabel:'',
          customerId:'',
        },
        btnLoading5:false
      }
    },
    computed: {
      ...mapGetters([
        'name',
        'mobile',
        'userId',
        'isMange',
      ]),
      // 采购桐鑫合同查看
      isCanseeTx() {
        if(this.roles.indexOf("seeTx") != -1){
          return true
        }else{
          return false
        }
      },
      // 采购日程合同查看
      isCanseeRc() {
        if(this.roles.indexOf("seeRc") != -1){
          return true
        }else{
          return false
        }
      },
      isCanSaleByDept(){
        if(this.roles.indexOf("saleDept") != -1){
          return true
        }else{
          return false
        }
      },
      isCanSaleByAll(){
        if(this.roles.indexOf("saleAll") != -1){
          return true
        }else{
          return false
        }
      },
      allDelaySettleOrder(){
        if(this.roles.indexOf("allDelaySettleOrder") != -1){
          return true
        }else{
          return false
        }
      },
    },
    components:{crmTag,postSettlement},
    created() {
      if (localStorage.getItem('pumsListQuery')){
        this.listQuery = JSON.parse(localStorage.getItem('pumsListQuery'));
        localStorage.removeItem('pumsListQuery');
      }
      this.getList();
      this.getUserOptionList();
      this.getOrderStatListData();
      getKingInfo().then((res)=>{
        this.JDupdate = res.orderUpdateTime;
      })

    },
    filters: {
      formatCreateTime(time) {
        if(time){
          let date = new Date(time);
          return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
        }else{
          return '--'
        }
      },
      fiferPayState(val){
        if(val == 0){
          return '未支付'
        }else if(val == 1){
          return '未结清'
        }else if(val == 2){
          return '已结清'
        }
      },
      fiftransactionType(val){
        if(val == 'BANK_PAY'){
          return '银行汇款'
        }else if(val == 'COD_PAY'){
          return '货到付款'
        }else if(val == 'DEPOSIT_PAY'){
          return '定金'
        }else if(val == 'XISHANG_PAY'){
            return '锡商支付'
          }
        else{
          return '其它'
        }
      },
      filterRepaid(val){
          if(val == 1){
            return '未还清'
          }else if(val == 2){
            return '已还清'
          } else {
            return '未贷款'
          }
        },
    },
    methods:{
      //结算申请
      toSettlement(item){
        this.$refs.postSettlement.showPop(item)
      },
      //显示采购评级
      showSetLabel(item){
        this.dialogVisible5 = true;
        this.labelForm.customerId = item.customerId;
        this.labelForm.customerLabel = item.customerLabel;
      },
      //关闭采购评级
      handleClose5(){
        this.dialogVisible5 = false;
        this.btnLoading5 = false;
        this.labelForm.customerLabel ='';
        this.labelForm.customerId = '';
      },

      //确认采购评级
      handleConfirm5(){
        this.btnLoading5 = true;
        customersAjaxEdit(this.labelForm).then((res)=>{
          this.btnLoading5 = false;
          this.handleClose5();
          this.getList();
        }).catch(()=>{
          this.btnLoading5 = false;
        })
      },

      //获取订单状态列表
      getOrderStatListData(){
        getOrderStatList().then((res)=>{
          this.orderStateList = res.filter((el)=>{
            return  el.orderState == 20 || el.orderState == 25 || el.orderState == 30 || el.orderState == 40
          });
        })
      },


      //获取员工下拉选项
      getUserOptionList(){
        getOrderUsersList().then((res)=>{
          this.userOptionList = res;
        })
      },

      //选择员工名称
      handleSelectUserName(key,item){
        this.listQuery[key] = item.userId;
      },

      //客户名称输入匹配
      querySearch(queryString, cb){
        getCustomerOption({keywords:queryString}).then((res)=>{
          cb(res);
        })
      },

      //选择客户名称
      handleSelectCustomerName(item){
        this.listQuery.customerName = item.customerName
      },

      /**
       * 切换选择状态
       */
      handleSelect(key, keyPath){
        this.listQuery = JSON.parse(JSON.stringify(defaultListQuery)),
        this.listQuery.tab = key;

        if(key == 'hasProcess' || key == 'txProcessed' || key == 'rcProcessed'){
          let now = new Date();
          let endTime = now.getTime() + 3600 * 1000 * 24 * 15
          let endDate = formatDate(new Date(endTime), 'yyyy-MM-dd');
          let startTime =  now.getTime() - 3600 * 1000 * 24 * 15
          let startDate = formatDate(new Date(startTime), 'yyyy-MM-dd')
          this.listQuery.createTime = [startDate,endDate];
        }
        this.handleSearchList();
      },
      handleSizeChange(val){
        this.listQuery.pageNum = 1;
        this.listQuery.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val){
        this.listQuery.pageNum = val;
        this.getList();
      },

      handleSearchList(){
        this.listQuery.pageNum = 1;
        this.getList();
      },

      //获取订单列表
      getList() {
        this.listLoading = true;
        getTxOrdersCount().then(res=>{
          this.txPending = res
        })
        getRcOrdersCount().then(res=>{
          this.rcPending = res
        })
        let listQuery = JSON.parse(JSON.stringify(this.listQuery));
        if(listQuery.isMoresuOnlineOrder != 1){
          listQuery.isMoresuNeedCheck = null;
        }
        if(listQuery.tab == "wait" || listQuery.tab == "hasProcess" || listQuery.tab == 'myChargeDelaySettleOrder' || listQuery.tab == 'allDelaySettleOrder'){
          saleOrderList(listQuery).then(response => {
          this.tableData = response.list;
          this.count = response.count;
          this.listAmount = response.listAmount;
          this.statisticsAmount = response.statisticsAmount;
          this.statisticsCount = response.statisticsCount;
          this.statisticsGoodsNum = response.statisticsGoodsNum;
          this.listLoading = false;
        }).catch(()=>{
          this.listLoading = false;
        });
        } else if(listQuery.tab == "txPending" || listQuery.tab == "txProcessed") {
            listQuery.tab = listQuery.tab =="txPending" ? "wait" : "hasProcess"
          txOrderList(listQuery).then(response => {
          this.tableData = response.list;
          this.count = response.count;
          this.listAmount = response.listAmount;
          this.statisticsAmount = response.statisticsAmount;
          this.statisticsCount = response.statisticsCount;
          this.statisticsGoodsNum = response.statisticsGoodsNum;
          this.listLoading = false;
        }).catch(()=>{
          this.listLoading = false;
        });
        } else{
          listQuery.tab = listQuery.tab =="rcPending" ? "wait" : "hasProcess"
          rcOrderList(listQuery).then(response => {
          this.tableData = response.list;
          this.count = response.count;
          this.listAmount = response.listAmount;
          this.statisticsAmount = response.statisticsAmount;
          this.statisticsCount = response.statisticsCount;
          this.statisticsGoodsNum = response.statisticsGoodsNum;
          this.listLoading = false;
        }).catch(()=>{
          this.listLoading = false;
        });
        }

      },

      //去详情页
      toDetail(type,item){
        let routeData
        // localStorage.setItem('pumsListQuery', JSON.stringify(this.listQuery));
        if(this.listQuery.tab == 'wait' || this.listQuery.tab == 'hasProcess' || this.listQuery.tab == 'myChargeDelaySettleOrder' || this.listQuery.tab == 'allDelaySettleOrder'){
          routeData = this.$router.resolve({name:'purchaseDetail',query:{id:item.orderId,type:type}});
        }else if(this.listQuery.tab == 'txPending' || this.listQuery.tab == 'txProcess') {
          routeData = this.$router.resolve({name:'txPurchaseDetail',query:{id:item.orderId,type:type}});
        }else {
          routeData = this.$router.resolve({name:'rcPurchaseDetail',query:{id:item.orderId,type:type}});
        }
        window.open(routeData.href);
        // this.$router.push({name:'purchaseDetail',query:{id:item.orderId,type:type}})
      },

    },
  }
</script>

<style scoped lang="scss">

</style>
